<template>
  <div class="field_container">
    <div
      v-if="label"
      class="field_label"
    >
      {{ label }} <span
        v-if="required"
        class="tips"
      >*</span>
    </div>
    <slot />
    <template
      v-if="isErrorMessage"
    >
      <p
        class="error-message"
        v-text="errorMessage"
      />
    </template>
  </div>
</template>

<script>
export default {
  name: 'FieldLabel',

  props: {
    label: {
      type: String,
      default: () => ''
    },
    required: {
      type: Boolean,
      default: () => false
    },
    errorMessage: {
      type: String,
      default: () => ''
    },
    // 错误信息展示
    isErrorMessage: {
      type: Boolean,
      default: () => true
    }
  }
};
</script>

<style lang="scss" scoped>
.field_container {
  .field_label {
    line-height: 2.4em;
    .tips {
      color: #f00;
    }
  }
}
.error-message {
  color: #f00;
  margin-top: 3px;
  font-size: 12px;
}
</style>
